<template>
    <div>
        <VHeader title='发起招募活动'></VHeader>
        <van-cell-group>
            <van-cell title="招募活动资料" title-style='color:#F65D5D'/>
        </van-cell-group>
        <div class="register-wrap"> 
            <van-field 
                clickable
                clearable
                maxlength='50'
                label='活动名称：'
                v-model="title" 
            /> 
            <van-field 
                class="areaInput"
                clickable
                clearable
                type='textarea'
                label='活动内容：'
                v-model="description" 
            /> 
            <van-field 
                clickable
                clearable
                readonly
                label='活动日期：'
                right-icon='arrow-down'
                v-model="activityTime" 
                @click="openPicker('activityTime')"
            /> 
             <van-field 
                clickable
                clearable
                readonly
                label='报名截止：'
                right-icon='arrow-down'
                v-model="endingTime" 
                @click="openPicker('endingTime')"
            /> 
            <van-field 
                clickable
                clearable
                label='活动天数：'
                v-model="activityDays" 
                type='number'
            >
                <div slot="button">天</div>
            </van-field>
            <van-field 
                clickable
                clearable
                label='需要人数：'
                type='number'
                v-model="recruitNum" 
            >
                <div slot="button">人</div>
            </van-field>
            <van-field 
                label='活动地点：'
                placeholder="请选择"
                :value='areaModal.area.name+" "+areaModal.village.name'
                @click="areaListShow=true;getArea()"
                readonly
                clickable
                right-icon='arrow-down'
            />
            <van-field 
                clickable
                clearable
                label='详细地点：'
                v-model="activityPlace" 
            />
            <van-field 
                clickable
                clearable
                label='联 系 人 ：'
                v-model="contactName" 
            />
            <van-field 
                clickable
                clearable
                type='tel'
                maxlength='11'
                label='联系电话：'
                v-model="contactMobile" 
            />
            
           
           
        </div>  
        <van-popup v-model="areaListShow" position="bottom">
            <van-area :area-list="areaList" 
            columns-num='2'
            @cancel='areaListShow=false'
            @confirm='confirmArea'
            v-show="areaListShow"/>      
        </van-popup>
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker
                @confirm='pickerConfirm'
                v-model="currentDate"
                type="date"
            />
        </van-popup>
         <div class="bot">
            <van-button color="#F65D5D"  :loading='btnLoading'
                @click="submitAction"
                loading-text='提交中'
            >确认提交</van-button>
            <van-button color="#F65D5D" 
                @click="$router.go(-1)"
            >返回</van-button>
        </div>
    </div>
</template>

<script>
import {PHONE_CHECK,formatDate} from '@/utils/utils'
export default {
    data(){
        return{
            title:'',
            description:'',
            activityTime:'',
            endingTime:'',
            activityDays:'',
            recruitNum:'',
            activityPlace:'',
            contactName:'',
            contactMobile:'',
            currentDate: new Date(),
            
            
            showPicker:false,//底部picker modal
            pickerType:'',
            btnLoading:false,
            areaModal:{
                area:{name:''},
                village:{name:''}
            },
            areaListShow:false,
            curAreadata:{},
            areaList:{
                province_list: {
                    
                },
                city_list: {
                   
                },
                county_list: {
                    110101: '东城区',
                }
            }
            
        }
    },
    created(){
        // this.getArea()
    },
    methods:{
        openPicker(type){
            this.pickerType=type
            this.showPicker = true;

        },
        pickerConfirm(val){
            console.log(formatDate(val,"yyyy-MM-dd"));
            
            this[this.pickerType]=formatDate(val,"yyyy-MM-dd")
            this.showPicker=false
        },
        vaildSubmit(){
            let submitObj={
                title:'活动名称',
                description:'活动内容',
                activityTime:'活动日期',
                endingTime:'报名截止时间',
                activityDays:'活动天数',
                recruitNum:'招募人数',
                areaModal:{vaild:x=>x.area.code&&x.village.code,text:'活动地点'},
                activityPlace:'活动详细地点',
                contactName:'联系人',
                contactMobile:{vaild:x=>PHONE_CHECK(x),text:'联系电话'},
            }
            let flag=0
            for(var i in submitObj){
                console.log(this[i],i)
                console.log('null==>'+i)
                if(typeof submitObj[i].vaild==='function'){
                    if(!submitObj[i].vaild(this[i].value||this[i])){
                        this.$toast(`请填写正确的${submitObj[i].text}`);
                        return false
                        break;
                    }
                }
                if(!this[i]){
                    this.$toast(`请填写正确的${submitObj[i]||submitObj[i].text}`)
                    break;
                }
                flag++
            }
            console.log(Object.keys(submitObj).length,flag)
            return Object.keys(submitObj).length==flag
        },
        //提交注册
        async submitAction(){
            let vaildResult=this.vaildSubmit()
            if(!vaildResult){
                return 
            }
            this.btnLoading=true
            const {
                title,
                description,
                activityTime,
                endingTime,
                activityDays,
                recruitNum,
                activityPlace,
                contactName,
                contactMobile,
            }=this
            try {
                await this.$http({
                    method:'api.Activity.add',
                    title,
                    description,
                    activityTime,
                    endingTime,
                    activityDays,
                    recruitNum,
                    activityPlace,
                    contactName,
                    contactMobile,
                    area:this.areaModal.area.code,
                    village:this.areaModal.village.code
                })
                this.$toast({
                    duration:1000,
                    message:'发起成功',
                    onClose:()=>{
                        this.$router.replace('/user')
                    }
                })
                this.btnLoading=false
            } catch (error) {
                this.btnLoading=false
            }

        },
        confirmArea(data){
            this.areaListShow=false;
            this.curAreadata=data;
            console.log(data)
            if(!data[0]||!data[1]){
                this.$toast('请选择区域')
                return
            }
            
            this.areaModal.area=data[0]
            this.areaModal.village=data[1]
            
        },
        async getArea(){
            if(Object.keys(this.areaList.province_list).length == 0){
                let res=await this.$http({
                    method:'api.index.getArea',
                },true)
                const {areaList,villageList}=res.data
                let obj={
                    province_list:areaList,
                    city_list:villageList
                }
                // this.areaList=obj
                this.areaList.province_list=areaList
                this.areaList.city_list=villageList
                this.$set(this.areaList,'province_list',areaList)
                this.$set(this.areaList,'city_list',villageList)
            }
            
            console.log(this.areaList)
        }

    }
}
</script>

<style lang='scss' scoped>
.register-wrap{
    padding: 0 .4rem .9rem;
}
/deep/ .register-wrap{
.van-cell{padding-left: 0;padding-right: 0;}
.van-cell__title span,.diy-label{color: #666666;font-size: 14px;}
.van-field__label{width: auto;}
.van-cell__value{border: solid 1px #CBCACA;border-radius: .1rem;height: .68rem;padding-right: .2rem;
    margin-top: -.1rem;
    .van-field__control{height: .68rem;padding-left: .2rem;}
}
}

/deep/ .bot{padding: 0 .4rem;padding-bottom:.9rem;display: flex;justify-content: space-between;
button{width: 3.14rem;border-radius: .1rem;}
}
/deep/ .areaInput .van-cell__value{height: auto;}
</style>